<template>
   <div class="config-list">
        <div class="clearfix" style="margin-bottom:10px;">
            <el-select v-model="channelStatus" placeholder="状态" style="width:120px;" @change="statusChange">
                <el-option
                v-for="item in channelStatusOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-input placeholder="渠道名称" v-model="channelName" class="input"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
            <el-button class="add-btn fr" icon="el-icon-edit" @click="addConfigDialog">添加渠道</el-button>
        </div>
        <el-table
            border fit highlight-current-row
            :data="tableData"
            style="width: 100%">
            <el-table-column type="expand" width="30">
                <template slot-scope="props">
                    <el-form label-position="left" class="demo-table-expand">
                        <el-form-item label="渠道名称">
                            <span>{{ props.row.channelName }}</span>
                        </el-form-item>
                        <el-form-item label="渠道ID">
                            <span>{{ props.row.channelId }}</span>
                        </el-form-item>
                        <el-form-item label="主题">
                            <span>{{ props.row.theme }}</span>
                        </el-form-item>
                         <el-form-item label="渠道长链接">
                            <span>{{ props.row.h5LongUrl }}</span>
                        </el-form-item>
                        <el-form-item label="渠道短链接">
                            <span>{{ props.row.h5ShortUrl }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                type="index"
                width="30">
            </el-table-column>
            <el-table-column
                align="center"
                prop="channelName"
                label="渠道名"
                width="150">
            </el-table-column>
            <el-table-column
                align="center"
                label="状态">
                <template slot-scope="scope">
                    <p>{{mappingStatus[scope.row.status + ''] }}</p>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="theme"
                label="主题">
            </el-table-column>
            <el-table-column
                align="center"
                prop="limitNum"
                label="扣量">
            </el-table-column>
            <el-table-column
                align="center"
                label="结算模式|单价"
                width="100">
                <template slot-scope="scope">
                    <p v-if="scope.row.settlementType ===0"> CPA | {{scope.row.settlementPrice || 0}}</p>
                    <p v-if="scope.row.settlementType ===1"> UV | {{scope.row.settlementPrice || 0}}</p>
                    <!-- <p v-if="scope.row.settlementType ===2"> CPS | {{scope.row.settlementPrice || 0}}</p> -->
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="H5模式">
                <template slot-scope="scope">
                    <p>{{scope.row.h5Model === 1 ? '贷超' : '现金贷'}}</p>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="访问开关">
                <template slot-scope="scope">
                    <span style="color:red;">{{scope.row.qqSwitch ? 'QQ' : ''}}</span>
                    <span style="color:green;">{{scope.row.wxSwitch ? '微' : ''}}</span>
                    <span style="color:blue;">{{scope.row.pcSwitch ? 'PC' : ''}}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="是否弹窗">
                <template slot-scope="scope">
                      <p>{{Number(scope.row.h5WindowSwitch) ? '开' : '关'}}</p>
                </template>
            </el-table-column>

            <el-table-column
                align="center"
                label="开启次页">
                <template slot-scope="scope">
                    <p>{{scope.row.h5PerfectSwitch ? '开' : '关'}}</p>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="实名校验">
                <template slot-scope="scope">
                    <p>{{Number(scope.row.realnameSwitch) ? '开' : '关'}}</p>
                </template>
            </el-table-column>
             <el-table-column
                align="center"
                label="自动切换代超开关">
                <template slot-scope="scope">
                    <p>{{Number(scope.row.channelAutoSwitch) ? '开' : '关'}}</p>
                </template>
            </el-table-column>
            <el-table-column
                width="300"
                align="center"
                label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="modifyConfigDialog(scope.row, scope.$index)">编辑</el-button>
                    <el-button size="small" @click="pageSetting(scope.row, scope.$index)">设置</el-button> 
                     <el-button size="small" @click="setRealAndLoanDioag(scope.row, scope.$index)">设置实名下款</el-button> 
                </template>
            </el-table-column>
        </el-table>
         <div class="clearfix pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNum">
            </el-pagination>
         </div>
        <!-- 新增配置框 -->
        <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="70%" class="dialog">
            <el-row class="line">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>渠道名</span>
                    <el-input placeholder="请输入渠道名" style="width: 200px;" v-model="addData.channelName"></el-input>
                </el-col>
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>结算模式</span>
                    <el-select v-model="addData.settlementType" placeholder="模式" style="width:120px;" @change="payModelChange">
                        <el-option
                        v-for="item in payModelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="line">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>单价</span>
                    <el-input placeholder="请输入单价" style="width: 120px;" v-model="addData.settlementPrice"></el-input>
                </el-col>
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>状态</span>
                    <el-select v-model="addData.status" placeholder="状态" style="width:120px;" @change="statusChange">
                        <el-option
                        v-for="item in channelStatusOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="line">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>用户扣除数</span>
                    <el-input placeholder="请输入扣除数" style="width: 120px;" v-model="addData.limitNum"></el-input>
                    <p style="color:#999;font-size:12px;position:relative;left:110px;top:3px;">默认为不扣除, 1~100按比例扣除用户数</p>
                </el-col>
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>实名扣除数</span>
                    <el-input placeholder="请输入实名扣除数" style="width: 120px;" v-model="addData.realnameLimitNum"></el-input>
                    <p style="color:#999;font-size:12px;position:relative;left:110px;top:3px;">默认为不扣除, 1~100按比例扣除实名用户数</p>
                </el-col>
            </el-row>
            <el-row class="line">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>下款扣除数</span>
                    <el-input placeholder="请输入下款扣除数" style="width: 120px;" v-model="addData.loanLimitNum"></el-input>
                    <p style="color:#999;font-size:12px;position:relative;left:110px;top:3px;">默认为不扣除, 1~100按比例扣除下款用户数</p>
                </el-col>
                 <el-col :span="12">
                    <span class="label"><span class="red">*</span>自动转换代超</span>
                    <el-switch v-model="addData.channelAutoSwitch"></el-switch>
                </el-col>
            </el-row>
             <el-row class="line">
                 <el-col :span="12">
                    <span class="label"><span class="red">*</span>是否弹窗</span>
                    <el-switch v-model="addData.h5WindowSwitch"></el-switch>
                </el-col>
            </el-row>


            <hr style="margin:20px 0;">
            <el-row class="line">
                <el-col :span="12" style="margin-top:5px;">
                    <span class="label">实名校验</span>
                    <el-switch v-model="addData.realnameSwitch"></el-switch>
                </el-col>
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>H5模式</span>
                    <el-select v-model="addData.h5Model" placeholder="H5模式" style="width:120px;" @change="h5ModelChange">
                        <el-option
                        v-for="item in h5ModelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <hr style="margin:20px 0;">
            <el-row class="line" style="margin-bottom:30px;">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>开启QQ访问</span>
                    <el-switch v-model="addData.qqSwitch"></el-switch>
                </el-col>
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>开启微信访问</span>
                    <el-switch v-model="addData.wxSwitch"></el-switch>
                </el-col>
            </el-row>
            <el-row class="line">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>开启PC访问</span>
                    <el-switch v-model="addData.pcSwitch"></el-switch>
                </el-col>
            </el-row>
            <hr style="margin:20px 0;">
            <el-row class="line">
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>主题</span>
                    <el-select v-model="addData.theme" placeholder="主题" style="width:120px;" @change="themeChange">
                        <el-option
                        v-for="item in themeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <span class="label">渠道短链接</span>
                    <el-input placeholder="请输入渠道短链接" style="width:200px;" v-model="addData.h5ShortUrl"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmClick">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 页面设置 -->
        <el-dialog title="页面设置" :close-on-click-modal="false" :visible.sync="dialogVisible_set" width="70%" class="dialog2">
            <el-row class="line">
                <el-col :span="6">
                    <span class="label">注册页配置</span>
                </el-col>
                <el-col :span="16">
                    <el-checkbox v-model="pageSet.h5RgSwitch" disabled>开启注册页</el-checkbox>
                    <div style="margin-top:15px;">
                        <el-checkbox v-model="pageSet.mobileShow" disabled>手机验证</el-checkbox>
                        <el-checkbox v-model="pageSet.passwordShow">设置密码</el-checkbox>
                        <el-checkbox v-model="pageSet.zmScoreShow">芝麻分</el-checkbox>
                    </div>
                </el-col>
            </el-row>
            <el-row class="line">
                <el-col :span="6">
                    <span class="label">完善页配置</span>
                </el-col>
                <el-col :span="16">
                    <el-checkbox v-model="pageSet.h5PerfectSwitch">开启完善信息页</el-checkbox>
                    <div style="margin-top:15px;">
                        <el-checkbox v-model="pageSet.nameShow">姓名</el-checkbox>
                        <el-checkbox v-model="pageSet.idcardShow">身份证号</el-checkbox>
                        <el-checkbox v-model="pageSet.wxShow">微信号</el-checkbox>
                        <el-checkbox v-model="pageSet.qqShow">QQ号</el-checkbox>
                        <el-checkbox v-model="pageSet.zmScoreShow2">芝麻分</el-checkbox>
                    </div>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_set = false">取 消</el-button>
                <el-button type="primary" @click="confirmClick_set">确 定</el-button>
            </span>
        </el-dialog>

         <!-- 下款实名设置 -->
        <el-dialog title="下款实名设置" :close-on-click-modal="false" :visible.sync="dialogVisible_real" width="70%" class="dialog3">
             <el-row class="line">
                <el-table
                    class="table"
                    border fit highlight-current-row
                    v-loading="loading"
                    element-loading-text="加载中"
                    element-loading-spinner="el-icon-loading"
                    :data="realData"
                    style="width: 100%">
                     <el-table-column
                        align="center"
                        prop="channelId"
                        v-if="show"
                        >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="channelName"
                        label="名称">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="registerNum"
                        label="注册数">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="channelRealNum"
                        label="实名数">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="实名率">
                        <template slot-scope="scope">
                            <p>{{isNaN((scope.row.channelRealNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.channelRealNum*100/scope.row.registerNum).toFixed(1))+'%'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="channelAppLoanNum"
                        label="下款数">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="下款率">
                        <template slot-scope="scope">
                            <p>{{isNaN((scope.row.channelAppLoanNum*100/scope.row.registerNum).toFixed(1)) ? '-' : ((scope.row.channelAppLoanNum*100/scope.row.registerNum).toFixed(1))+'%'}}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span class="label"><span class="red">*</span>实名数</span>
                    <el-input placeholder="请输入实名数" style="width: 120px;" v-model="realData[0].realNum"></el-input>
                </el-col>
                 <el-col :span="12">
                    <span class="label"><span class="red">*</span>下款数</span>
                    <el-input placeholder="请输入下款数" style="width: 120px;" v-model="realData[0].loanNum"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_real = false">取 消</el-button>
                <el-button type="primary" @click="confirmClick_real">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import _channel from '@/services/channel.js'
    export default {
        data() {
            return {
                show :false,
                mappingStatus: {
                    '0': '下线',
                    '1': '上线',
                    '2': '禁用'
                },
                pageSet: {
                    h5RgSwitch: true,
                    mobileShow: true,
                    zmScoreShow: true,
                    passwordShow: false,
                    h5PerfectSwitch: false,
                    nameShow: true,
                    idcardShow: true,
                    wxShow: true,
                    qqShow: false,
                    zmScore2: false
                },
                addData: {
                    "channelName": "",//渠道名
                    "h5Model": 1,//1贷超, 2现金贷
                    "limitNum": 0,// 用户扣除数
                    "loanLimitNum": 0,//用户下款扣除数
                    "realnameLimitNum": 0,// 实名扣除数
                    "settlementPrice": 0,//结算单价
                    "settlementType": 0,//结算类型, 0 CPA 1 UV
                    "status": 1,// 渠道状态, 0下线 1上线 2禁用
                    "theme": "orange",//主题
                    "h5WindowSwitch":false,//是否弹窗
                    "pcSwitch": false,//pc开关
                    "qqSwitch": false,//qq开关
                    "realnameSwitch": false,// 实名开关
                    "channelAutoSwitch":false,
                    "wxSwitch": false//微信开关
                },
                realData:[{
                    "channelId":"",
                    "channelName":"",
                    "registerNum":"",
                    "channelRealNum":"",
                    "channelAppLoanNum":"",
                    "uvNum":"",
                    "realNum":0,
                    "loanNum":0
                }],
                themeOptions: [{
                    value: 'orange',
                    label: '橙'
                }, {
                    value: 'red',
                    label: '红'
                }, {
                    value: 'douyin',
                    label: '抖音'
                },{
                    value: 'main',
                    label: '主要'
                },{
                    value: 'blue',
                    label: '蓝'
                }],
                h5ModelOptions: [{
                    value: 1,
                    label: '贷超'
                }, {
                    value: 2,
                    label: '现金贷'
                }],
                payModelOptions: [{
                    value: 0,
                    label: 'CPA'
                },{
                    value: 1,
                    label: 'UV'
                }
                // ,{
                //     value: 2,
                //     label: 'CPS'
                // }
                ],
                channelName: '',// 渠道名称
                channelStatus: 1,
                channelStatusOption: [{
                    value: 1,
                    label: '上线'
                }, {
                    value: 0,
                    label: '下线'
                }, {
                    value: 2,
                    label: '禁用'
                }],
                loading: false,
                dialogVisible: false,
                dialogVisible_set: false,
                dialogVisible_real:false,
                query: {
                  pageNum: 1,
                  pageSize: 30
                },
                totalNum: 0,
                dialogTitle:"",
                tableData: []
            }
        },
        methods: {
            // 切换主题
            themeChange(val){
                console.log('theme', this.addData.theme)
            },
            // 切换h5模式
            h5ModelChange(val){
                console.log('h5Model', this.addData.h5Model)
            },
            // 结算模式切换 
            payModelChange(val){
                console.log('payModel', this.addData.payModel)
            },
            // 搜索按钮
            searchClick(){
                this.getList()
            },
            // 切换状态下拉
            statusChange(val){
                this.getList()
                console.log('channelStatus', this.channelStatus)
                console.log('addData.channelStatus', this.addData.channelStatus)
            },
            // 添加配置或修改配置确定操作
            confirmClick(){
                let params = this.addData
                params.pcSwitch = params.pcSwitch ? 1 : 0
                params.qqSwitch =  params.qqSwitch ? 1 : 0
                params.realnameSwitch = params.realnameSwitch ? 1 : 0// 实名开关
                params.wxSwitch = params.wxSwitch ? 1 : 0//微信开关
                params.channelAutoSwitch = params.channelAutoSwitch ? 1 : 0//贷超转换开关
                params.h5WindowSwitch = params.h5WindowSwitch ? 1 : 0//H5是否弹窗开关
                if (this.dialogTitle === '添加渠道') {
                    delete params.channelId
                    _channel.addChannel(params)
                    .then(res => {
                        console.log('res', res.data)
                        if(res.data.code === 200){
                            this.$msg.success('添加成功')
                            this.dialogVisible = false
                            this.getList()
                        }else if(res.data.code === 500){
                            this.$msg.error(res.data.msg)
                        }
                    })
                } else {
                    _channel.updateChannel(params)
                    .then(res => {
                        if(res.data.code === 200){
                            this.$msg.success('更新成功')
                            this.dialogVisible = false
                            this.getList()
                        }else if(res.data.code === 500){
                            this.$msg.error(res.data.msg)
                        }else{
                            this.$msg.error('操作失败')
                        }
                    })
                }
                
            },
            // 打开添加配置框
            addConfigDialog(){
                this.dialogVisible = true
                this.dialogTitle = '添加渠道'
                this.addData = {
                    "channelName": "",//渠道名
                    "h5Model": 1,//1贷超, 2现金贷
                    "limitNum": 0,// 用户扣除数
                    "loanLimitNum": 0,//用户下款扣除数
                    "pcSwitch": false,//pc开关
                    "qqSwitch": false,//qq开关
                    "h5WindowSwitch":false,
                    "realnameLimitNum": 0,// 实名扣除数
                    "realnameSwitch": false,// 实名开关
                    "settlementPrice": 0,//结算单价
                    "settlementType": 0,//结算类型, 0 CPA 1 UV
                    "status": 1,// 渠道状态, 0下线 1上线 2禁用
                    "theme": "orange",//主题
                    "wxSwitch": false,//微信开关
                    "channelAutoSwitch":false,
                    "h5ShortUrl": ""//渠道短链接
                }
            },
            // 打开修改配置框
            modifyConfigDialog(item, index){
                this.dialogVisible = true
                this.dialogTitle = '编辑'
                this.addData = {
                    "channelId": item.channelId,//渠道ID
                    "channelName": item.channelName,//渠道名
                    "h5Model": item.h5Model || 1,//1贷超, 2现金贷
                    "limitNum": item.limitNum || 0,// 用户扣除数
                    "loanLimitNum": item.loanLimitNum || 0,//用户下款扣除数
                    "pcSwitch": item.pcSwitch ? true : false,//pc开关
                    "qqSwitch": item.qqSwitch ? true : false,//qq开关
                    "h5WindowSwitch":item.h5WindowSwitch ? true :false,
                    "realnameLimitNum": item.realnameLimitNum || 0,// 实名扣除数
                    "realnameSwitch": item.realnameSwitch ? true : false,// 实名开关
                    "settlementPrice": item.settlementPrice || 0,//结算单价
                    "settlementType": item.settlementType,//结算类型, 0 CPA 1 UV
                    "status": item.status,// 渠道状态, 0下线 1上线 2禁用
                    "theme": item.theme || 'orange',//主题
                    "wxSwitch": item.wxSwitch ? true : false,//微信开关
                    "channelAutoSwitch":item.channelAutoSwitch ? true : false,//代超自动转换开关
                    "h5ShortUrl": item.h5ShortUrl//渠道短链接
                }
            },
            // 打开页面设置框
            pageSetting(item, index){
                _channel.getChannelPageSet({channelId:item.channelId})
                .then(res => {
                    console.log('res', res.data)
                    this.pageSet = {
                        channelId: res.data.channelId,
                        h5RgSwitch: res.data.h5RgSwitch ? true : false,
                        mobileShow: res.data.mobileShow ? true : false,
                        zmScoreShow: res.data.zmScoreShow ? true : false,
                        passwordShow: res.data.passwordShow ? true : false,
                        h5PerfectSwitch: res.data.h5PerfectSwitch ? true : false,
                        nameShow: res.data.nameShow ? true : false,
                        idcardShow: res.data.idcardShow ? true : false,
                        wxShow: res.data.wxShow ? true : false,
                        qqShow: res.data.qqShow ? true : false,
                        zmScoreShow2: res.data.zmScoreShow2 ? true : false
                    }
                    this.dialogVisible_set = true
                })
            },
            // 页面设置确认操作
            confirmClick_set(){
                let params = this.pageSet
                params.h5RgSwitch = params.h5RgSwitch ? 1 : 0
                params.mobileShow = params.mobileShow ? 1 : 0
                params.zmScoreShow = params.zmScoreShow ? 1 : 0
                params.passwordShow = params.passwordShow ? 1 : 0
                params.h5PerfectSwitch = params.h5PerfectSwitch ? 1 : 0
                params.nameShow = params.nameShow ? 1 : 0
                params.idcardShow = params.idcardShow ? 1 : 0
                params.wxShow = params.wxShow ? 1 : 0
                params.qqShow = params.qqShow ? 1 : 0
                params.zmScoreShow2 = params.zmScoreShow2 ? 1 : 0
                _channel.pageSet(params)
                .then(res => {
                    if(res.data.code === 200){
                        this.$msg.success(res.data.msg)
                        this.dialogVisible_set = false
                        this.getList()
                    }
                })
            },
            // 设置实名下款数
            setRealAndLoanDioag(item,index){
                let params={
                    'channelId':item.channelId
                }
                _channel.getRealAndLoanInfo(params)
                 .then(res => {
                      this.realData = [{
                        channelId : item.channelId,
                        channelName: res.data.channelName || '',
                        registerNum: res.data.registerNum || 0,
                        channelRealNum: res.data.channelRealNum || 0,//实名数
                        channelAppLoanNum: res.data.channelAppLoanNum || 0,//下款数
                        realNum : res.data.channelRealNum,
                        loanNum : res.data.channelAppLoanNum 
                    }]
                 
                   
                })
                this.dialogVisible_real =true
            },
            confirmClick_real(){
                if(this.realData[0].realNum<=this.realData[0].loanNum){
                     this.$msg.error("实名数不能比下款数小")
                     return
                }
                if(this.realData[0].realNum>=this.realData[0].registerNum){
                     this.$msg.error("实名数不能比注册数大")
                     return
                }
                console.info(this.realData[0],"realData")
                 let params = {
                     channelId: this.realData[0].channelId,
                     realNum : Number(this.realData[0].realNum || 0),
                     loanNum : Number(this.realData[0].loanNum || 0)
                 }
               
                 _channel.setRealAndLoanData(params)
                 .then(res => {
                    if(res.data.code === 200){
                        this.$msg.success(res.data.msg)
                        this.dialogVisible_real = false
                    }
                })
            },
            handleSizeChange(val) {
                this.query.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.query.pageNum = val
                this.getList()
            },
            getList(){
                let params = {
                    channelName: this.channelName,
                    status: this.channelStatus,
                    pageNum: this.query.pageNum,
                    pageSize: this.query.pageSize
                }
                _channel.getChannelConfigList(params)
                .then(res => {
                    console.log('res', res.data)
                    this.tableData = res.data.list
                    this.totalNum = res.data.total
                })
            }
        },
        created(){
            this.getList()
        }
    }
</script>

<style lang="scss" scoped>
@import '~styles/variables.scss';
.config-list{
    .input{
      display: inline-block;
      width:200px;
    }
    .pagination{
        margin-top:15px;
    }
    .dialog{
        .red{
            color: #f00;
        }
        .line{
            margin-bottom: 15px;
        }
        .label{
            width:100px;
            display: inline-block;
            text-align: right;
            margin-right: 5px;
        }
    }
    .dialog2{
        .line{
            margin-bottom:25px;
        }
        .label{
            width:150px;
            display: inline-block;
            text-align: right;
        }
    }
    .dialog3{
        .line{
            margin-bottom:25px;
        }
        .label{
            width:150px;
            display: inline-block;
            text-align: right;
        }
    }
    .add-btn{
        width: 100px;
        background: $theme-color;
        color: #fff;
        font-size: 14px;
        margin-top: 5px;
    }
}
</style>